<template>
  <li class="list-group-item" v-for="(k,v) in aclass" @click="liClick(v,1)">
    <a class="category-list-link">{{v}}</a>
    <span class="badge">{{k}}</span>
  </li>
</template>

<script>
export default {
  name: "SideBarItemLi",
  props:{
    aclass:{
      type:Object,
      default(){
        return {}
      }
    },
  },
  emits: {
    liClick: null,//事件没有检验
  },
  methods:{
    liClick(val,index){
      this.$emit('liClick',val,index);
      // console.log('sidebaritemli---ok');
      // console.log(val,index);
    }
  }
}
</script>

<style scoped>

.list-group-item {
  list-style: none;
  border: 2px solid #dddddd;
  padding: 5px;
  position: relative;
}
.badge {
  position: absolute;
  right: 2px;
  background-color: #aaaaaa;
  border-radius: 25%;
}
a {
  text-decoration: none;
  cursor: pointer;
}
a:link {
  color: #2e3133;
}
a:hover {
  text-transform:uppercase;/* 鼠标指针移动到链接上 */
  border: 1px solid #2e3133;
}
</style>